<template>
  <div id="setting">
    <nav-bar title="设置"></nav-bar>
    <div id="changePwd">
      <h2 class="van-doc-demo-block__title">修改密码</h2>
      <van-form @submit="changePwd">
        <van-field
            v-model="newPassword"
            type="password"
            name="originalPassword"
            label="原密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写原密码' }]"
        />
        <van-field
            v-model="originalPassword"
            type="password"
            name="newPassword"
            label="新密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写新密码' }]"
        />
        <div>
          <van-button style="width: 100%" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <div style="margin-top: 9px">
      <h2 class="van-doc-demo-block__title">退出登录</h2>
      <van-button style="width: 100%;" loading-type="spinner" :loading="isLoading"
                  @click="showActionSheet = true">
        退出登录
      </van-button>
    </div>
    <div>
      <van-action-sheet
          v-model="showActionSheet"
          description="确认退出登录？"
      >
        <div>
          <van-button class="actionSheetBtn" @click="showActionSheet = false">取消</van-button>
          <van-button class="actionSheetBtn" @click="exit">确定</van-button>
        </div>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import NavBar from "components/NavBar/NavBar";
import _g from "assets/js/global";
import {Toast} from 'vant';

export default {
  name: "Setting",
  components: {
    NavBar
  },
  data() {
    return {
      originalPassword: '',
      newPassword: '',
      isLoading: false,
      showActionSheet: false
    }
  },
  methods: {
    changePwd(e) {
      e['id'] = JSON.parse(localStorage.getItem('loginInfo')).id;
      console.log(e);
      new Promise((resolve, reject) => {
        axios.post('/yibancircle/updatePsw', {...e})
            .then(res => {
              console.log(res);
              if (res.status !== 200) {
                reject(res)
              }
              resolve(res)
            })
      }).then(res => {
        let toast = _g.showToast('success', res.msg);
        setTimeout(() => {
          toast.clear();
          _g.reLogin();
        }, 1000)
      }).catch(err => {
        Toast.fail(err.msg);
      })
    },
    exit() {
      localStorage.clear();
      this.menu = null;
      this.$router.push('/login');
    }
  }
}
</script>

<style scoped>
.van-doc-demo-block__title {
  margin: 0;
  padding: 32px 16px 16px;
  color: rgba(0, 0, 0, 1);
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
}

.actionSheetBtn {
  width: 100%;
  padding: 0;
  border: 0;
}
</style>
